

<template>
  <div class="session-wrapper">
    <own-search>
      <div class="search-wrapper">
        <a-tooltip title="搜索用户名 | 昵称 | 手机号 | 邮箱">
          <a-input
            v-model:value="searchForm.keyword"
            placeholder="用户名|昵称|手机号|邮箱"
          />
        </a-tooltip>
        <a-select
          v-model:value="searchForm.status"
          allowClear
          placeholder="选择用户状态"
        >
          <a-select-option :value="1">有效</a-select-option>
          <a-select-option :value="0">禁用</a-select-option>
        </a-select>
        <a-button type="primary" @click="reload" :loading="loading">
          查询
        </a-button>
        <a-button type="default" @click="reset" :loading="loading">
          重置
        </a-button>
      </div>
      <template #suffix>
        <a-button
          type="primary"
          @click="create"
          ghost
          v-acl="['sys:user:create']"
          >新增用户</a-button
        >
      </template>
    </own-search>
    <div class="table-wrapper">
      <a-table
        :row-key="(record) => record.id"
        :loading="loading"
        :columns="columns"
        :pagination="pagination"
        :data-source="sourceData"
        @change="handleTableChange"
      >
        <template #bodyCell="{ column, record, index }">
          <template v-if="column.key === 'index'">{{
            (page.pi - 1) * page.ps + index + 1
          }}</template>
          <template v-if="column.key === 'status'"> </template>
          <template v-if="column.key === 'name'">
            <own-status-tip
              :name="'账号'"
              :status="record.status"
              :text="record.username"
            />
            <span class="m-t-4 light d-inline-block font-12"
              >昵称：{{ record.nickname }}</span
            >
          </template>
          <template v-if="column.key === 'loginInfo'">
            <span>IP：{{ record.loginIp ? record.loginIp : "暂未登录" }}</span>
            <span class="m-t-4 light d-block font-12">{{
              record.loginTime ? format(record.loginTime) : ""
            }}</span>
          </template>
          <template v-if="column.key === 'role'">
            <span>{{ getRole(record.role) }}</span>
          </template>
          <template v-if="column.key === 'createTime'">
            <span>{{
              record.createTime ? format(record.createTime) : ""
            }}</span>
          </template>
          <template v-if="column.key === 'operate'">
            
            <a-button
              v-acl="['sys:user:assignRole']"
              type="link"
              size="small"
              @click="handleAssignRole(record)"
              >分配角色</a-button
            >
            <a-divider v-acl="['sys:user:assignRole']" type="vertical" />
            <a-button
              v-acl="['sys:user:edit']"
              type="link"
              size="small"
              @click="edit(record)"
              >编辑</a-button
            >

            <a-divider v-acl="['sys:user:edit']" type="vertical" />
             <a-popconfirm
              title="确定重置当前账号的登录密码？"
              ok-text="确定"
              cancel-text="取消"
              @confirm="handleResetPwd(record)"
            >
              <a href="#" v-acl="['sys:user:resetPwd']">重置密码</a>
            </a-popconfirm>
            <a-divider v-acl="['sys:user:resetPwd']" type="vertical" />
            <a-popconfirm
              title="是否删除当前该行数据？"
              ok-text="确定"
              cancel-text="取消"
              @confirm="del(record)"
            >
              <a href="#" v-acl="['sys:user:del']">删除</a>
            </a-popconfirm>
          </template>
        </template>
      </a-table>
    </div>
    <edit ref="editForm" @submit="reload" />
    <assignRole ref="assignRoleForm" @submit="reload" />
  </div>
</template>

<script lang="ts">
import {
  computed,
  defineComponent,
  onMounted,
  reactive,
  ref,
  toRefs,
} from "vue";
import Enums from "@/utils/constant/enums";
import { useRoute, useRouter } from "vue-router";
import systemApis from "@/apis/system";
import { PaginationConfig } from "@/utils/antd-config";
import { dateFormat } from "@/utils/time";
import OwnSearch from "@/components/own-search.vue";
import OwnStatusTip from "@/components/own-status-tip.vue";
import Edit from "./components/edit.vue";
import AssignRole from "./components/assignRole.vue";
import { Modal } from "ant-design-vue";
const columns = [
  {
    title: "",
    key: "index",
    align: "center",
    width: 60,
  },
  {
    title: "账号信息",
    // dataIndex: "username",
    key: "name",
  },

  {
    title: "手机号",
    dataIndex: "mobile",
    key: "mobile",
  },
  {
    title: "邮箱",
    dataIndex: "email",
    key: "email",
  },
  {
    title: "角色",
    key: "role",
  },
  {
    title: "IP/登录时间",
    key: "loginInfo",
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
    key: "createTime",
  },
  {
    align: "center",
    title: "操作",
    key: "operate",
    // fixed: "right",
    // width: 180
  },
];
export default defineComponent({
  name: "User",
  components: {
    OwnSearch,
    OwnStatusTip,
    Edit,
    AssignRole,
  },
  setup() {
    const route = useRoute();
    const router = useRouter();
    const roleMenuForm = ref(null);
    const editForm = ref(null);
    const assignRoleForm = ref(null);
    const state = reactive({
      searchForm: {
        keyword: "",
        status: undefined,
      },
      loading: false as boolean,
      sourceData: [] as Array<any>,
      page: {
        pi: 1,
        ps: 10,
        total: 0,
      },
    });
    //#region 列表查询
    // 查询
    const reload = async () => {
      state.loading = true;
      const res: any = await systemApis.userPage({
        ...state.searchForm,
        ...state.page,
      });
      state.loading = false;
      if (res.code === 0) {
        state.sourceData = res.data.records;
        state.page.total = res.data.total;
      }
    };
    // 重置
    const reset = () => {
      state.searchForm = {
        keyword: "",
        status: undefined,
      };
      state.page.pi = 1;
      reload();
    };
    const pagination = computed(() => ({
      total: state.page.total,
      current: state.page.pi,
      pageSize: state.page.ps,
      ...PaginationConfig,
    }));
    // table切换页码页数
    const handleTableChange = (
      pagination: { pageSize: number; current: number }
      // filters: any,
      // sorter: any
    ) => {
      state.page.pi = pagination.current;
      state.page.ps = pagination.pageSize;
      reload();
    };
    const getRole = (role) => {
      let roleNames = role.map((item) => item.roleName);
      return roleNames.length ? roleNames.join("|") : "暂未分配";
    };
    const create = () => {
      (editForm as any).value.open("add");
    };
    const edit = (record) => {
      (editForm as any).value.open("edit", record);
    };
    // 删除
    const del = (record: any) => {
      Modal.confirm({
        title: "是否删除当前用户?",
        content: "删除后数据无法找回，该账号也无法登录",
        async onOk() {
          const res: any = await systemApis.delUser(record.id);
          if (res.code === 0) {
            reload();
          }
        },
      });
    };
    const handleResetPwd = (record:any) => {
       Modal.confirm({
        title: "是否重置当前账号的登录密码?",
        content: "重置后，新密码与登录账号一致",
        async onOk() {
          const res: any = await systemApis.resetPwd({userId:record.id,username: record.username});
          if (res.code === 0) {
            // reload();
          }
        },
      });
    }
    // 分配角色
    const handleAssignRole = (record) => {
      (assignRoleForm as any).value.open(record.id);
    };
    //#endregion
    const format = computed(() => {
      return (date) => {
        return dateFormat(date);
      };
    });
    onMounted(() => {
      reload();
    });
    return {
      columns,
      pagination,
      roleMenuForm,
      format,
      editForm,
      create,
      edit,
      getRole,
      assignRoleForm,
      handleResetPwd,
      ...toRefs(state),
      reload,
      reset,
      handleTableChange,
      handleAssignRole,
      del,
    };
  },
});
</script>

<style scoped>
</style>
